// pages/components/swiper/index.js

/**
 * swiper默认配置项
 */ 
const defaultOptions = {
  "indicator-dots": false, // 是否显示面板指示点
  "indicator-color": "rgba(0, 0, 0, .3)", // 指示点颜色
  "indicator-active-color": "#000000", // 当前选中的指示点颜色
  "previous-margin": "0px", // 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
  "next-margin": "0px", // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
  "display-multiple-items": 1, // 同时显示的滑块数量
  "skip-hidden-item-layout": false, // 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
  "easing-function": "default", // 指定 swiper 切换缓动动画类型
  autoplay: true, // 是否自动切换
  current: 0, // 当前所在滑块的 index
  interval: 3000, // 自动切换时间间隔
  duration: 500, // 滑动动画时长
  circular: true, // 是否采用衔接滑动
  vertical: false, // 滑动方向是否为纵向
};

/**
 * ===== iOS新系统13.1.3 swiper-item 不支持style属性 ======
 */

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 用于渲染的swiper数据
    list: {
      type: Array,
      value: [],
      observer(newVal, oldVal) {
        this.observerImgUrls(newVal, oldVal);
      },
    },
    // 动态设置swiper的宽度
    width: {
      type: String,
      value: '750rpx',
    }, 
    // 动态设置swiper的高度
    height: {
      type: String,
      value: '520rpx',
    }, 
    // 自定义占位样式
    customStyle: {
      type: String,
      value: ''
    },
    // swiper配置项
    options: {
      type: Object,
      value: {},
      observer(newVal, oldVal) {
        this.observerOptions(newVal, oldVal);
      },
    }, 
  },

  /**
   * 组件的初始数据
   */
  data: {
    swiperOptions: defaultOptions, // swiper配置项
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 监听 list 变化
     */
    observerImgUrls(newVal, oldVal) {
      // 如果 list 不存在可渲染的数据或数据没有发生变化，则不再继续执行
      if (!newVal.length || newVal.toString() === oldVal.toString()) return;
    },

    /**
     * 监听 options 变化
     * @param {*} newVal
     * @param {*} oldVal
     */
    observerOptions(newVal, oldVal) {
      if (
        !Object.keys(newVal).length ||
        JSON.stringify(newVal) === JSON.stringify(oldVal)
      ) {
        return; // 若当前数据不存在或没有变化，则不再继续执行
      }

      const swiperOptions = Object.assign({}, defaultOptions, newVal);

      console.log("swiperOptions>> ", swiperOptions);

      this.setData({
        swiperOptions,
      });
    },

    /**
     * swiper点击事件回调
     * @param {*} e
     */
    handleTap(e) {
      this.triggerEvent("swiperTap", e);
    },

    /**
     * swiper滑动change事件
     * @param {*} event
     */
    handleChange({ detail }) {
      this.triggerEvent("swiperChange", detail);
    },

    handleTapSwiperItem(event) {
      console.log("===event===", event);
      const dataset = event.currentTarget;
      this.triggerEvent("swiperItemTap", { ...dataset });
    },
  },
});
